<template>
  <div id="glb_use"></div>
</template>

<script setup>
  import * as THREE from "three";

  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
  import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
  import { nextTick, onMounted } from "vue";

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(800, 600);

  function init() {
    var gltfLoader = new GLTFLoader();
    var dracoLoader = new DRACOLoader();

    dracoLoader.setDecoderPath("/static/draco");
    gltfLoader.setDRACOLoader(dracoLoader);

    gltfLoader.load("/static/glb/Soldier.glb", function (gltf) {
      var model = gltf.scene;
      scene.add(model);
    });

    renderer.render(scene, camera);
    document.getElementById("glb_use")?.appendChild(renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);
  }

  onMounted(() => {
    init();
    // animate();
  });
</script>

<style lang="scss" scoped></style>
